<!DOCTYPE html>
<meta charset="utf-8">
<html>
  <head>
    <title>Opening Frequency Report</title>
    <script type="text/javascript" src="wgo/wgo.min.js"></script>
    <script type="text/javascript" src="wgo/wgo.player.min.js"></script>
    <link type="text/css" href="wgo/wgo.player.css" rel="stylesheet" />
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vuetify@1.0.18/dist/vuetify.min.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://unpkg.com/vuetify@1.0.18/dist/vuetify.min.css" crossorigin="anonymous"/>
    <link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' crossorigin="anonymous"/> 

  </head>
  <body>
    <main class="container">
    <v-app >
      <v-content>
        <v-container grid-list-small text-xs-left>
          <v-layout row>
            <v-flex s12>
              <h1> Minigo Opening Analysis for {{run}} </h1>
            </v-flex>
          </v-layout>

          <v-layout v-for="opening in topSeq" row :key="opening.sequence + opening.run">
            <v-flex xs4 lg3>
              <v-card>
                  <v-card-text>
                      <div ref="playerNodes"
                        style="max-height:300px"
                        ></div>
                  </v-card-text>
              </v-card>
            </v-flex>
            <v-flex xs6 lg8>
                <div class="chart w-100" ref="chartNodes" style="height: 100%;min-height:300px"></div>
            </v-flex>
          </v-layout>
        </v-container>
      </v-content>
    </v-app>

    </main>

  </body>
  <script>
      var app = new Vue({
          el: 'main',
          data: {
              topSeq: {{giant_blob}},
              run: 'v17',
              run_times: {{time_ranges}},
          },
          mounted() {
              google.charts.load('current', {'packages':['corechart']});
              google.charts.setOnLoadCallback(this.drawChart);
          },
          methods: {
              drawChart() {
                  this.$refs.playerNodes.forEach((node, index) => {
                    var player = new WGo.BasicPlayer(node, {
                        sgf: "(;SZ[19];" + this.topSeq[index].sequence + ")",
                        layout: "minimal",
                        board: {section: {bottom: 9, left: 9, top:0, right: 0}},
                        move: 999,
                    });

                  });
                  this.$refs.chartNodes.forEach((node, index) => {
                      var data = new google.visualization.DataTable({
                          cols: this.topSeq[index].cols,
                          rows: this.topSeq[index].rows},
                      0.6);

                      var options = {
                          title: `Seen total ${this.topSeq[index].count} times`,
                          hAxis: {title: '% of training',
                                  viewWindow: {min: 0, max: 100}},
                          vAxis: {title: 'Frequency', logScale: true},
                          legend: { position : 'bottom'},
                          theme: 'material',
                          pointSize: 3,
                      }

                      var chart = new google.visualization.ScatterChart(node);

                      chart.draw(data, options);
                  });
              },
          }
      })
  </script>
</html>
<!DOCTYPE HTML>
